<template>
	<view class="page">
		<view :style="{height: statusBarHeight}" />
		<view class="title-bar">
			账户登录
		</view>
		<view class="wechat_login" v-if="!hasUserInfo">
			<form class="loginContent">
				<button class="avatar-wrapper">
					<image class="avatar" style="width: 400rpx;height: 160rpx;"
						src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/loginLogo.png" />
				</button>

				<view class="btn-wrapper">
					<button class="bg-green btn1" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber">手机号快捷登录</button>
				</view>
				<p class="cancelLogin" @click="cancelLogin()">暂不登录</p>
			</form>
		</view>
		<view class="wechat_login" v-if="hasUserInfo">
			<form class="loginContent">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar"
						:src="formData.avatar ? formData.avatar : 'https://smart-biotech.oss-cn-shanghai.aliyuncs.com/uniappImg/userAvatarUrl.png'" />
					<text class="loginLogoText" v-if="isShow">授权头像</text>
				</button>
				<view class="nameContent">
					<view class="title">昵称:</view>
					<input type="nickname" :value="nickname" placeholder="请输入您的昵称" @change="getNickname">
				</view>
				<view class="btn-wrapper">
					<button class="bg-green btn1" @click="submitUserInfo">登录</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	import Routine from '@/libs/routine';
	import {
		getUserInfo,
		postEditUser
	} from '@/api/user.js';
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js';

	export default {
		data() {
			return {
				formData: {
					nickname: null,
					avatar: null
				},
				statusBarHeight: `${uni.getSystemInfoSync().statusBarHeight}px`,
				userInfo: {},
				hasUserInfo: false,
				isShow: true
			};
		},
		methods: {
			getNickname(e) {
				this.formData.nickname = e.detail.value
			},
			decryptPhoneNumber(e) {
				Routine.getCode()
					.then(code => this.getWxUser(e, code))
					.catch(() => uni.hideLoading());
			},
			getWxUser(e, code) {
				const userInfo = {
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					loginCode: code
				};
				Routine.authUserInfo(userInfo.loginCode, userInfo)
					.then(res => {
						this.$store.commit("LOGIN", {
							token: res.data.token
						});
						this.getUserInfo();
					})
					.catch(err => console.error("登录失败:", err));
			},
			getUserInfo() {
				getUserInfo().then(res => {
					this.userInfo = res.data;
					if (this.userInfo.avatar && this.userInfo.nickname) {
						this.$store.commit("UPDATE_USERINFO", {
							userInfo: res.data
						});
						uni.switchTab({
							url: '/pages/platform/index'
						});
					} else {
						this.hasUserInfo = true;
					}
				});
			},
			onChooseAvatar(e) {
				this.formData.avatar = e.detail.avatarUrl;
			},
			submitUserInfo() {
				console.log(this.formData, this.userInfo, 'this.userInfo')
				if (this.formData.nickname && this.formData.avatar) {
					this.uploadImage(this.formData.avatar);
				} else {
					this.$util.Tips({
						title: '请设置头像和昵称'
					});
				}
			},
			uploadImage(filePath) {
				console.log(filePath, "filePath11111111111111111111")
				uploadImage(filePath, 'avatars/', (url) => {
					this.formData.avatar = url;
					console.log(this.formData.avatar, "this.formData.avatar")
					this.editUserInfo();
				}, (error) => {
					uni.showToast({
						title: '头像上传失败: ' + error.message
					});
				});
			},
			editUserInfo() {
				this.formData.uid = this.userInfo.uid;
				console.log(this.formData, "this.formData")
				postEditUser(this.formData).then(() => {
					uni.switchTab({
						url: '/pages/platform/index'
					});
				});
			},
			cancelLogin(){
				uni.switchTab({
					url: '/pages/platform/index'
				});
			}
		}
	};
</script>
<style lang="scss">
	page,
	.page {
		background: #fff;
		min-height: 100vh;
		background-image: url('https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/loginBag.png');
		background-size: 100% 100%;
	}
	.cancelLogin{
		text-align: center;
		margin-top: 60rpx;
		color: #828282;
	}
	.avatar-container {
		position: relative;
		margin: 60rpx auto;
		width: 164rpx;
		height: 164rpx;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-top: 200rpx;
	}

	.upAvatar {
		position: absolute;
		bottom: 4rpx;
		right: 4rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.btn-wrapper {
		margin-top: 86rpx;
		padding: 0 66rpx;

		button {
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			margin-top: 500rpx;
			border-radius: 120rpx;
			font-size: 30rpx;

			&.btn1 {
				color: #fff;
				background-color: #1D85E1;
			}

			&.btn2 {
				color: #666;
				border: 1px solid #1D85E1;
			}
		}
	}

	.title-bar {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		height: 43px;
	}

	.icon {
		position: absolute;
		left: 30rpx;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 86rpx;
		height: 86rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.avatar-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: none;
		color: inherit;
		border: none;
		padding: 0;
		font: inherit;
		cursor: pointer;
		outline: inherit;

		.avatar {
			height: 120rpx;
			width: 120rpx;
			border-radius: 20rpx;
		}
	}

	.avatar-wrapper::after {
		border: none;
	}

	.nameContent {
		display: flex;
		margin: 70rpx 0;
		border-top: 1px solid #eee;
		border-bottom: 2rpx solid #eee;
		padding: 20rpx 40rpx;

		width: 670rpx;
		height: 80rpx;
		margin: 60rpx auto;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 14px;
		border: 1px solid #D4EAFE;

		box-sizing: border-box;
		font-size: 28rpx;
		align-items: center;

		.title {
			width: 120rpx;
			margin-right: 40rpx;
		}
	}

	.loginLogo {
		height: 700rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.loginContent {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 100%;

			.loginLogoText {
				font-size: 24rpx;
				color: #828282;
				margin-top: 20rpx;
			}
		}
	}

	.loginBtn {
		width: 100%;

		.btn {
			width: 80%;
			border-radius: 20rpx;
			background-color: #ee3236;
			color: white;
		}
	}
</style>